<template>
  <div class="Roleapply-container">
    <el-steps :space="200" :active="myLastApply.apply_status + 2" finish-status="success" process-status="wait" align-center>
      <el-step title="申请提交"></el-step>
      <el-step title="申请待审核"></el-step>
      <el-step title="审核完成" v-if="myLastApply.apply_status === 0 || !myLastApply.apply_status"></el-step>
      <el-step title="审核批准" status="success" v-else-if="myLastApply.apply_status === 1"></el-step>
      <el-step title="审核驳回" status="error" v-else-if="myLastApply.apply_status === 2"></el-step>
    </el-steps>
    <el-form :model="roleForm" :rules="rules" status-icon ref="roleForm" label-width="100px" class="form">
      <el-form-item label="选择权限" prop="apply_role">
        <el-select v-model="roleForm.apply_role" placeholder="请选择要申请的权限">
          <el-option label="员工" value="0"></el-option>
          <el-option label="管理员" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('roleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import bus from '@/components/bus'
export default {
  name: 'Roleapply',
  data() {
    return {
      roleForm: {
        apply_role: '',
      },
      rules: {
        apply_role: [{ required: true, message: '请选择权限', trigger: 'blur' }],
      },
      myLastApply: {}
    }
  },
  created() {
    this.getRoleApply()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('/api/role/roleapply', this.roleForm)
          if (res.status === 1) return this.$message.error(res.message)
          this.$message.success(res.message)
          this.getRoleApply()
          if(this.$store.state.userInfo.role === 1){ //如果是管理就触发aside监听的自定义事件更新申请列表更新徽标
            bus.$emit('updateRoleList')
          }
        } else {
          this.$message.error('表单验证不通过')
          return false
        }
      })
    },
    async getRoleApply() {
      const {data: res} = await this.$http.get('/api/role/applylist')
      if (res.status === 1) return this.$message(res.message)
      this.myLastApply = res[res.length - 1]
    }

  },
}
</script>

<style lang="less" scoped>
.el-steps {
  margin-top: 50px;
  margin-left: 500px;
}
.el-form {
  margin-top: 50px;
  margin-left: 540px;
}
</style>
